<template>
  <div class="maincontain">
    <div class="createuser">
      <a-button
        @click="goLabEditor(FormType.Create)"
        type="primary"
        v-if="userInfo.role !== 2"
        >新增实验室</a-button
      >
      <div class="inputfilter">
        <a-input
          class="searchinput"
          addon-before="实验室名"
          v-model:value="searchInfo.labName"
          placeholder="输入实验室名查询"
          @change="onSearch"
        />
        <a-input
          class="searchinput"
          addon-before="实验室类型"
          v-model:value="searchInfo.labTypeName"
          placeholder="输入实验室类型查询"
          @change="onSearch"
        />
        <a-input
          class="searchinput"
          addon-before="实验员名字"
          v-model:value="searchInfo.experimenterName"
          placeholder="输入实验员名字查询"
          @change="onSearch"
        />
      </div>
    </div>
    <div class="lablist">
      <a-table
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :dataSource="dataSource"
        :columns="columsConfig"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'repairState'">
            <a-tag v-if="record.repairState === 1" color="red">异常</a-tag>
            <a-tag v-else color="green">正常</a-tag>
          </template>
          <template v-if="column.key === 'operator'">
            <a-space wrap>
              <a-button
                size="small"
                type="primary"
                @click="
                  () => {
                    goLabEditor(FormType.Update, record);
                  }
                "
                v-if="userInfo.role !== 2"
                >编辑</a-button
              >
              <a-button
                danger
                size="small"
                @click="
                  () => {
                    deleteLabModal(record);
                  }
                "
                v-if="userInfo.role !== 2"
                >删除</a-button
              >
              <a-button
                warning
                size="small"
                v-if="userInfo.role === 2"
                @click="
                  () => {
                    modalState(true, record);
                  }
                "
                >实验室报修</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <a-modal v-model:open="modalOpen" title="报修信息" :keyboard="true">
    <a-form-item label="问题描述" name="problem">
      <a-textarea
        :auto-size="{ minRows: 5, maxRows: 10 }"
        v-model:value="formStateRepairLog.problem"
      ></a-textarea>
    </a-form-item>
    <template #footer>
      <a-button key="back" @click="modalState(false)">取消</a-button>
      <a-button key="submit" type="primary" @click="handleRepairLog"
        >提交</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { FormType } from "@/EnvEnum/form";
import {
  deleteLabById,
  queryBatchLap,
} from "../../../api/methods/labManageReq";
import { columsConfig } from "./config";
import { computed, createVNode, onMounted, ref } from "vue";
import { debounce, omit } from "lodash";
import { ILabInfo, ILabQuery } from "@/api/RequestIDL/labManage";
import { IPagenation } from "@/views/userList/list/index.vue";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Message } from "@/utils/message";
import router from "@/router/router";
import { IRepairDesc } from "@/api/RequestIDL/repairLogType";
import { newRepairLog } from "@/api/methods/repairLogReq";
import { userInfo } from "@/utils/userInfo";
import { roleType } from "@/store/useRole";

const pageConfig = ref({
  pageSize: 10,
  page: 1,
  total: 0,
});
const pagination = computed(() => ({
  total: pageConfig.value.total,
  current: pageConfig.value.page,
  pageSize: pageConfig.value.pageSize,
}));
const searchInfo = ref<Partial<ILabQuery>>({
  labName: "",
  labTypeName: "",
  experimenterName: "",
});
const searchConfig = computed((): ILabQuery => {
  return {
    ...omit(pageConfig.value, "total"),
    ...searchInfo.value,
  };
});
const loading = ref(false);
const dataSource = ref<ILabInfo[]>([]);
const handleTableChange = async (pagination: IPagenation) => {
  pageConfig.value.page = pagination.current;
  pageConfig.value.pageSize = pagination.pageSize;
  getLabInfoList();
};
const getLabInfoList = async () => {
  const res = await queryBatchLap(searchConfig.value);
  if (res.code === 20000) {
    dataSource.value = res.data.records;
    pageConfig.value.total = res.data.total;
  }
};
onMounted(async () => {
  await getLabInfoList();
});
const deleteLabModal = (record: ILabInfo) => {
  Modal.confirm({
    title: "删除提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode(
      "div",
      { style: "color:red;" },
      `确定要删除【${record.name}】实验室吗？`
    ),
    onOk() {
      deleteLabById({ id: record.id }).then((res) => {
        if (res.code == 20000) {
          Message("success", "删除成功");
          // 重新拉取列表
          getLabInfoList();
        }
      });
    },
    onCancel() {},
  });
};
const goLabEditor = (formType: FormType, record?: any) => {
  router.push({
    name: "labCreate",
    query: { id: record?.id, formType },
  });
};
const onSearch = debounce(
  () => {
    getLabInfoList();
  },
  500,
  { maxWait: 1000 }
);

// 报修
const modalOpen = ref(false);
const formStateRepairLog = ref<IRepairDesc>({
  problem: "",
});
const recordCache = ref<ILabInfo>();
const modalState = async (isShow: boolean, record?: ILabInfo) => {
  modalOpen.value = isShow;
  recordCache.value = record;
  formStateRepairLog.value = {};
};
// 新增报修记录
const handleRepairLog = async () => {
  formStateRepairLog.value.experimenterId = recordCache.value!.experimenterId;
  formStateRepairLog.value.teacherId = userInfo.value.id;
  formStateRepairLog.value.labId = recordCache.value!.id;
  // if (userInfo.value.id !== roleType.Teacher) {
  //   Message("warning", "只有教师能报修申请");
  // }
  const res = await newRepairLog(formStateRepairLog.value);
  if (res.code === 20000) {
    Message("success", "报修申请成功");
  } else {
    Message("error", "报修申请失败");
  }
  modalState(false);
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontain {
  .createuser {
    padding: 10px;
    .inputfilter {
      margin-top: 10px;
      display: flex;
      .searchinput {
        margin-right: 10px;
        max-width: 350px;
      }
    }
  }
}
</style>
